$(function () {
    // 获取文文章列表
    initArticleList();

    function initArticleList() {
        $.get("/my/article/cates",
            function (res) {
                var htmlStr = template('tpl', res);
                $('tbody').html(htmlStr);
            },
        );
    }
    // 为添加类别按钮绑定事件
    var layer = layui.layer;
    $('#addCateBtn').on('click', function () {
        layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '添加文章分类',
            content: $('#dialog-add').html()
        });

    })
    // 发起ajax的属性添加文章的分类
    $('body').on('submit', "#form-add", function (e) {
        e.preventDefault()
        // console.log($('#form-add').serialize())
        $.post("/my/article/addcates", $('#form-add').serialize(),
            function (res) {
                if (res.status !== 0) {
                    return layer.msg('添加文章类别失败！');
                }
                layer.msg('添加文章类别成功！');
                initArticleList();
                // 根据索引，关闭对应的弹出层
                layer.close(indexAdd)
            },
        );
    });
    // 为添加类别按钮绑定点击事件
    var indexAdd = null
    $('#btnAddCate').on('click', function () {
        indexAdd = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '添加文章分类',
            content: $('#dialog-add').html()
        })
    });
    //可以管理分类。由于删除按钮是后期生成的，所以需要事件代理。
    $('table').on('click', '.btn-delet', function () {
        var id = $(this).attr('data-Id');
        // console.log(id);
        $.get("/my/article/deletecate/" + id,
            function (res) {
                if (res.status !== 0) {
                    return layer.msg('删除分类失败！');
                } else {
                    initArticleList();
                }
            },
        );
    });
    //创建弹出层
    var indexEdit = null
    $('tbody').on('click', '#btn-edit', function () {
        // 弹出一个修改文章分类信息的层
        indexEdit = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '修改文章分类',
            content: $('#dialog-edit').html()
        })
    });
    //编辑分类。事件代理
    var form = layui.form;
    $('table').on('click', "#btn-edit", function () {
        var id = $(this).attr('data-Id');
        // 获取到数据显示在输入框里。
        $.get("/my/article/cates/" + id,
            function (res) {
                if (res.status !== 0) {
                    return layer.msg('获取数据失败！');
                } else {
                    form.val('form-edit', res.data)
                }
            },
        );
    });
    // 提交修改之后发送到数据库
    $('body').on('submit', '#form-edit', function (e) {
        e.preventDefault();
        $.post("/my/article/updatecate", $(this).serialize(),
            function (res) {
                if (res.status !== 0) {
                    return layer.msg('类别修改失败！');
                }
                layer.msg('类别修改成功！')
                initArticleList();
            },
        );
    })
})